<script setup lang='ts'>
// 请求获取栏目数据接口
const { data: info } = await useServerRequest<{ data: any }>("sites/info", {
  method: "POST",
  body: {},
});
const siteInfo = info.value?.result;
</script>

<template>
  <nav class="nav">
   
    <header class="header">
      <NuxtLink class="nav-item" to="/">
        <span class="m-flex-r m-jc-s m-ai-c"
          >
          <img
            :src="siteInfo.logoUrl"
            :alt="siteInfo.name"
            style="width: 44px; height: 44px; border-radius: 50%"
          />
          <span style="margin-left: 12px; font-weight: 600">{{
            siteInfo.name
          }}</span></span
        >
      </NuxtLink>
      <NuxtLink class="nav-item active" to="/" style="margin-left: 20px"
        >首页</NuxtLink
      >
    </header>
  </nav>
</template>

<style lang='scss' scoped>
.nav {
  position: sticky;
  top: 0;
  height: 64px;
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  .header {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 64px;
    line-height: 64px;
    margin: 0 auto;
    max-width:1334px;
    padding:0 16px;
    .nav-item {
      all: initial;
      &:hover {
        cursor: pointer;
      }
    }
    .active{
      transition: all ease-in-out 0.15s;
      &:hover {
        cursor: pointer;
        color: #ea6f5a;
      }
    }
  }
}
</style>